<!Doctype html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8"/>
    <title>搜索结果</title>
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" />
    <link rel="shortcut icon"  href="favicon.ico">
    <script th:src="@{jquery-3.1.1.js}" type="text/javascript"></script>
    <script th:src="@{jquery.validate.js}" type="text/javascript"></script>
    <script th:src="@{messages_zh.js}"></script>
    <script th:src="@{bootstrap/js/bootstrap.min.js}"></script>

    <style>
        body{
            background-color: rgba(216,216,216,0.81);
        }
        .search{
            margin: 20px auto 10px;
            width: 60%;
            height: 60px;
        }
        .show{
            width:270px;
            height: 200px;
            margin: 5px 15px 10px 0;
            color: black;
            float: left;
            background-image: url(course.jpg);
        }
        .title{
            position:relative;
            top:10px;
            text-align: center;
            font-family: Monaco;
            font-size: 20px;
        }
        .content{
            position:relative;
            margin: 7px 0 0 0;
            text-align: left;
            font-family: Monaco;
            font-size: large
        }

        .foot a:link { color: #28a4c9;font-size: 20px;}		/* 未被访问的链接 */
        .foot a:hover {color: #66afe9}	/* 鼠标指针移动到链接上 */
        .fail{
            color: gray;
            font-family: Monaco;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
    <script>
        $(function(){
            $("#banner li a:not(#drop)").mouseover(function(){
                $(this).css("color","black");
            });
        });
        $(function(){
            $("#banner li a:not(#drop)").mouseout(function(){
                $(this).css("color","white");
            });
        });
        $(function() {
            $(".show").mouseover(function () {
                //让当前得到焦点的文本框改变其背景色
                $(this).css("box-shadow", " 3px 3px 3px #888888 ");
                $(this).css("position","relative");
                $(this).css("top","-1px");
            });

            $(".show").mouseout(function () {
                //让当前得到焦点的文本框改变其背景色
                $(this).css("box-shadow", " 0 0");
                $(this).css("position","relative");
                $(this).css("top","1px");
            });
        });
    </script>
</head>





<body>


<div class="container">
    <th:block th:include="/index :: header"></th:block>

    <form method="get" th:action="@{/Search}">
        <div class="input-group input-group-lg search">
            <input type="text" class="form-control" placeholder="输入课程名/授课老师查询" name="param" style="color: #9d9d9d;height: 60px">
            <span class="input-group-btn" >
            <button class="btn btn-default" type="submit" style="color: black;font-family: Monaco;height: 60px">Search</button>
        </span>
        </div>
    </form>
    <div th:if="${not #lists.isEmpty(courses)}">
        <div th:each="course : ${courses}" class="show" >
            <a th:href="@{/ShowCourse(ID=${course.courseID},page=0)}">
            <div th:text="${course.courseName}" class="title"></div>
            </a>
            <div style="margin:7px 0 0 0;padding: 1px;width: 270px;height: 150px">
            <div><span class="glyphicon glyphicon-th" style="color: rgb(0,0,0);"></span>
            <span th:text=" '课程号: '+${course.courseID}" class="content"></span></div>
            <div><span class="glyphicon glyphicon-user" style="color: rgb(0, 0, 0);"></span>
            <span th:text=" '授课老师: '+${course.tname}" class="content"></span></div>
            <div><span class="glyphicon glyphicon-time" style="color: rgb(0, 0, 0);"></span>
            <span th:text=" '课时: '+${course.period}" class="content"></span></div>
            </div>
        </div>
    </div>
    <div th:if="${#lists.isEmpty(courses)}" class="fail">
        抱歉,您查询的课程不存在!
    </div>
</div>

</body>
</html>